import React, { Component } from 'react'
import ListStore from '../../flux/stores/ListStore'
import ButtonActions from '../../flux/actions/ButtonActions'

export default class MyButton extends Component {
  constructor (props) {
    super(props)
    this.satate = {
      items: ListStore.getAll()
    }
  }
  componentDidMount () {
    ListStore.addChangeListener(this._onchange.bind(this))
  }
  componentWillUnmount () {
    ListStore.removeChangeListener(this._onchange.bind(this))
  }
  _onchange () {
    this.setState({
      items: ListStore.getAll()
    })
  }
  createNewItem (event) {
    ButtonActions.addNewItem('new item')
  }

  render () {
    // let HtmlTpl = this.state.items.map(function(item, i) {
    //   return <li key={i}>{item}</li>
    // })
    return (
      <div>
        <button onClick={this.createNewItem}>
            click this button
        </button>
        {/* <ul>{HtmlTpl}</ul> */}
      </div>
    )
  }
}